<template>
  <div class="mainDiv">
    <div class="title">{{ titleItems.title }}</div>
    <el-descriptions :column="3" border>
      <el-descriptions-item
        v-for="(item, index) in titleItems.items"
        :key="index"
      >
        <template #label>
          <div class="cell-item">{{ item.label }}</div>
        </template>
        {{ item.type }}11
        <span v-if="(item.type = 'text')">{{
          detailDatas[item.valueKey] || ""
        }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  titleItems: {
    default: {},
    type: Object,
  },
  detailDatas: {
    default: {},
    type: Object,
  },
});
</script>

<style scoped lang="scss">
.mainDiv {
  .title {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #0f1824;
    margin: 20px 0;
    padding: 0 14px;
    border-left: 4px solid $themeBlue;
  }
}
:deep(.el-descriptions) {
  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    width: 195px;
    height: 50px;
    background-color: #f1f1f1;
    color: #333333;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    padding-left: 20px;
  }
  .el-descriptions__body
    .el-descriptions__table.is-bordered
    .el-descriptions__cell {
    border: 1px solid #e1e1e1;
  }
}
</style>
